<template>
  <div>
    <base-header class="pb-6 pb-8 pt-5 pt-md-6 bg-gradient-success">
    </base-header>
    <b-container fluid class="mt--7">
      <div class="containr">
        <b-row style="color: white">
          <b-col xl="12" class="mb-xl-0">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>通知</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >查看历史通知</el-button
                >
              </div>
              <div>
                <div class="text item">
                  新的教务系统（乐游校园）成功上线了！！！
                </div>
                <div class="text item">
                  震惊！！耿丹某男子居然通宵好几个晚上敲代码？？这究竟是头发的减少还是寿命的缩短，让我们一起去见证他的传说！
                </div>
                <div class="text item">
                  学生服务大厅（学校南门篮球场对面）按装了刷卡机，并且打印好了申请表，现可直接办理学生证以及火车磁条等业务，学生可直接带着学生卡到学生服务大厅缴费办理，不需要再去财务处缴费，也不需要找辅导员老师开证明啦~
                </div>
              </div>
            </el-card>
          </b-col>
        </b-row>
        <b-row>
          <b-col xl="12" class="mb-xl-0 mt-5">
            <el-card
              >场馆开放情况
              <table class="fieldTable">
                <tr v-for="(item, index) in fieldInfoList" :key="index">
                  <td>
                    <badge class="badge-dot mr-4" type="">
                      <i :class="`bg-${colorList[item.timeType]}`"></i>
                      <span :class="`text-${colorList[item.timeType]}`">{{
                        timeTypeList[item.timeType]
                      }}</span>
                    </badge>
                  </td>
                  <td>{{ item.name }}</td>
                  <td>
                    <span :class="`text-${colorList[item.nowState]}`">{{
                      nowState[item.nowState]
                    }}</span>
                  </td>
                  <td>开馆时间</td>
                  <td>{{ item.openTime }}</td>
                  <td>闭馆时间</td>
                  <td>{{ item.closeTime }}</td>
                </tr>
              </table>
            </el-card>
          </b-col>
          <b-col xl="6" class="mb-xl-0 mt-5">
            <el-card>在线抢课</el-card>
          </b-col>
          <b-col xl="6" class="mb-xl-0 mt-5">
            <el-card>点餐功能</el-card>
          </b-col>
          <b-col xl="6" class="mb-xl-0 mt-5">
            <el-card>历史绩点</el-card>
          </b-col>
        </b-row>
      </div>
    </b-container>
  </div>
</template>
<script>
// Axios
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      timeTypeList: ["非实时", "实时"],
      colorList: ["danger", "success"],
      nowState: ["当前关闭", "当前开放"],
      fieldInfoList: [
        {
          timeType: 1,
          name: "游泳馆",
          nowState: 0,
          openTime: "8:00",
          closeTime: "20:00",
        },
        {
          timeType: 0,
          name: "篮球馆",
          nowState: 0,
          openTime: "8:00",
          closeTime: "20:00",
        },
      ],
    };
  },
  methods: {
    test() {
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization:
            "eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE2MDg2MDg4NjMsInN1YiI6Im1rIiwiaWF0IjoxNjA4MDA0MDYzNjQzfQ.trx_NFHXiG4kQXLasJ-ZfKfk6xEYKeWyDn1XypYOINMhKpDrswZ6y92MWL6Lq3ct8XN93TJOu_LTOnNE6GL15g",
        },
        url: "/api/field/getAllField", //后端请求的路径
        method: "post",
      }).then((response) => {
        this.fieldInfoList = response.data;
      });
    },
  },
  mounted() {
    this.test();
  },
};
</script>
<style>
.containr {
  background-color: #fff;
  height: 705px;
}
.el-table .cell {
  padding-left: 0px;
  padding-right: 0px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.fieldTable {
  margin: auto;
  margin-top: 20px;
  border: darkturquoise;
  text-align: left;
}
.fieldTable td {
  width: 100px;
}
</style>
